<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {css href="__PLUGIN_SRC__/Element/element.min.css"}
    {js href="__PLUGIN_SRC__/jQuery/jquery.min.js"}
    {js href="__PLUGIN_SRC__/Swiper/swiper.min.js"}
    {css href="__TEMPLATE_STATIC__/data_screen/index.css"}
    <title>数据大屏</title>
</head>

<body>
<div id="page-container">
    <el-row>
        <el-col :span="24" align="center">
            <div class="header-title">
                <div>{{title}}</div>
            </div>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="24">
            <div class="screen-content">
                <el-row :gutter="24">
                    <el-col :span="7">
                        <el-row>
                            <el-col :span="24">
                                <div class="group">
                                    <div class="group-title">
                                        <span>求职者数据概览</span>
                                    </div>
                                    <div class="group-content">
                                        <el-row>
                                            <el-col :span="12">
                                                <div class="seeker-title">学历分布情况</div>
                                                <div class="seeker-item" ref="edu-level" id="edu-level"></div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div class="seeker-title">工作经验情况</div>
                                                <div class="seeker-item" ref="work-exp" id="work-exp"></div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div class="seeker-title">男女比例</div>
                                                <div class="seeker-item" ref="sex-rate" id="sex-rate"></div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div class="seeker-title">年龄分布</div>
                                                <div class="seeker-item" ref="age-rate" id="age-rate"></div>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <div class="industry-rate">
                                    <div class="title">最受欢迎的行业</div>
                                    <div class="content" ref="industry-rate">

                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="9">
                        <div class="label-items">
                            <el-row :gutter="24">
                                <el-col :span="6">
                                    <div class="label-item">
                                        <span>{{registeredCompany}}</span>
                                        <span>入驻企业</span>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="label-item">
                                        <span>{{recruitingJobs}}</span>
                                        <span>在招岗位</span>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="label-item">
                                        <span>{{recruitNumber}}</span>
                                        <span>用人需求</span>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="label-item">
                                        <span>{{seekerNumber}}</span>
                                        <span>求职人数</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="system-time">
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <div class="time-item">
                                        <span>{{date}}&nbsp;|&nbsp;{{day}}</span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="time-item">
                                        <span>{{time}}</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>

                        <div class="activity-trend">
                            <div class="trend-title">活跃度情况</div>
                            <div ref="activity-trend" content="echart"></div>
                        </div>
                        <div class="delivery-job-top">
                            <el-row :gutter="24">
                                <el-col :span="24">
                                    <div class="delivery-list">
                                        <div class="delivery-title">投递情况</div>
                                        <div class="delivery-list-swiper">
                                            <div class="swiper-container delivery-container">
                                                <div class="swiper-wrapper">
                                                    <div class="swiper-slide" v-for="(item,index) in deliveryList">
                                                            <span class="ellipsis"
                                                                  style="width: 65px;">{{item.resume_name}}</span>
                                                        &nbsp;于&nbsp;
                                                        <span class="delivery_time">
                                                                {{item.delivery_time | timeFormat}}
                                                            </span>
                                                        &nbsp;投递了&nbsp;
                                                        <span class="job_name ellipsis"
                                                              style="width: calc(70% - 65px);">{{item.job_name}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <div class="company-nature">
                                    <div class="title">企业性质占比</div>
                                    <div class="content" ref="company-nature">

                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="company-size">
                                    <div class="title">企业规模情况</div>
                                    <div class="content" ref="company-size"></div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">


                                <div class="hot-job-rank">
                                    <div class="title">最受欢迎职位top50</div>
                                    <div class="swiper-container hot-job-rank-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide" v-for="(item,index) in hotJobRank"
                                                 :key="index">
                                                <div style="display: flex;justify-content: center;width: 100%;">
                                                    <div class="rank"
                                                         style="width: 30px;justify-content: center;align-items: center;">
                                                            <span v-if="index == 0"><img width="22"
                                                                                         src="/static/default1/bsadmin/img/icon-top-1.png"
                                                                                         alt=""></span>
                                                        <span v-else-if="index == 1"><img width="22"
                                                                                          src="/static/default1/bsadmin/img/icon-top-2.png"
                                                                                          alt=""></span>
                                                        <span v-else-if="index == 2"><img width="22"
                                                                                          src="/static/default1/bsadmin/img/icon-top-3.png"
                                                                                          alt=""></span>
                                                        <span v-else>&nbsp;{{index+1}}&nbsp;</span>
                                                    </div>
                                                    <div class="job-name ellipsis"
                                                         style="text-align: left;width: 75%;">
                                                        <span>{{item.title}}</span>
                                                    </div>
                                                    <div class="delivery-number ellipsis grey-font"
                                                         style="text-align: left;width: calc(25% - 30px);padding-right: 0.5em;">
                                                        <span class="grey-font">{{item.delivery_number}}</span>人投递
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <div class="popular-company-rank">
                                    <div class="title">最热门的企业top50</div>
                                    <div class="swiper-container company-rank-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide" v-for="(item,index) in companyRank"
                                                 :key="index">
                                                <div style="display: flex;justify-content: center;width: 100%;">
                                                    <div class="rank"
                                                         style="width: 30px;justify-content: center;align-items: center;">
                                                            <span v-if="index == 0"><img width="22"
                                                                                         src="/static/default1/bsadmin/img/icon-top-1.png"
                                                                                         alt=""></span>
                                                        <span v-else-if="index == 1"><img width="22"
                                                                                          src="/static/default1/bsadmin/img/icon-top-2.png"
                                                                                          alt=""></span>
                                                        <span v-else-if="index == 2"><img width="22"
                                                                                          src="/static/default1/bsadmin/img/icon-top-3.png"
                                                                                          alt=""></span>
                                                        <span v-else>&nbsp;{{index+1}}&nbsp;</span>
                                                    </div>
                                                    <div class="company-name ellipsis"
                                                         style="text-align: left;width: 75%;">
                                                        <span>{{item.company_name}}</span>
                                                    </div>
                                                    <div class="delivery-number ellipsis grey-font"
                                                         style="text-align: left;width: calc(25% - 30px);padding-right: 0.5em;">
                                                        <span class="grey-font">{{item.delivery_number}}</span>人投递
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </div>
        </el-col>
    </el-row>
    </el-col>
    </el-row>
</div>
</el-col>
</el-row>
</div>
</body>
{js href="__PLUGIN_SRC__/Vue/vue.min.js"}
{js href="__PLUGIN_SRC__/Vue/vue-lazyload.js"}
{js href="__PLUGIN_SRC__/Element/element.min.js"}
{js href="__PLUGIN_SRC__/Echarts/echarts.min.js"}
<script>
    var vm = new Vue({
        el: '#page-container',
        data() {
            return {
                title: '新云招聘系统数据大屏',
                date: '0000-00-00', day: 'xxx', time: '00:00:00', timer: {},
                eduEchart: {},
                expEchart: {},
                sexEchart: {},
                ageEchart: {},
                trendEchart: {},
                companyNatureEchart: {},
                companySizeEchart: {},
                companyOfDistrictEchart: {},
                industryRateEchart: {},
                deliveryListSwiper: {},
                registeredCompany: 140,
                recruitingJobs: 3200,
                recruitNumber: 20000,
                seekerNumber: 140,
                eduLevel: {
                    currentIndex: 1,
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        id: 'eduEchartLegend',
                        type: 'scroll',
                        // Try 'horizontal', 'vertical'
                        orient: 'vertical',
                        right: 10,
                        height: '80%',
                        top: 'center',
                        textStyle: {
                            color: '#ccc'
                        },
                        icon: 'rect',
                        pageIconSize: ''
                    },
                    series: [{
                        type: 'pie',
                        radius: ['20%', '60%'],
                        right: '40%',
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: "inside",
                                textStyle: {
                                    color: "#fff",
                                },
                            },
                        },
                        labelLine: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                formatter: '{d}%',
                                distance: -3
                            }
                        },
                        left: 'left',
                        data: []
                    }]
                },
                workExp: {
                    currentIndex: 1,
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        id: 'workExpEchartLegend',
                        // Try 'horizontal', 'vertical'
                        orient: 'vertical',
                        height: '70%',
                        top: 'center',
                        right: '10%',
                        textStyle: {
                            color: '#ccc'
                        },
                        icon: 'rect',
                        pageIconSize: ''
                    },
                    series: [{
                        type: 'pie',
                        radius: ['20%', '60%'],
                        right: '40%',
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: "inside",
                                textStyle: {
                                    color: "#fff",
                                },
                            },
                        },
                        labelLine: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                formatter: '{d}%',
                                distance: -3
                            }
                        },
                        left: 'left',
                        data: [{ value: 90, name: '应届生' }, { value: 10, name: '一年' }, { value: 10, name: '两年' }, { value: 60, name: '三年及以上' }]
                    }]
                },
                sexRate: {
                    currentIndex: 1,
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        id: 'sexEchartLegend',
                        // Try 'horizontal', 'vertical'
                        orient: 'vertical',
                        height: '80%',
                        top: 'center',
                        right: '10%',
                        textStyle: {
                            color: '#ccc'
                        },
                        icon: 'rect',
                        pageIconSize: ''
                    },
                    series: [{
                        type: 'pie',
                        radius: ['20%', '60%'],
                        right: '40%',
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: "inside",
                                textStyle: {
                                    color: "#fff",
                                },
                            },
                        },
                        labelLine: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                formatter: '{d}%',
                                distance: -3
                            }
                        },
                        left: 'left',
                        data: [
                            /* { value: 70, name: '男' }, { value: 30, name: '女' }, { value: 10, name: '未公开' } */
                        ]
                    }]
                },
                ageRate: {
                    currentIndex: 1,
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        id: 'ageEchartLegend',
                        // Try 'horizontal', 'vertical'
                        orient: 'vertical',
                        // right: 10,
                        height: '80%',
                        top: 'center',
                        right: '10%',
                        textStyle: {
                            color: '#ccc'
                        },
                        icon: 'rect',
                        pageIconSize: ''
                    },
                    series: [{
                        type: 'pie',
                        radius: ['20%', '60%'],
                        right: '40%',
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: "inside",
                                textStyle: {
                                    color: "#fff",
                                },
                            },
                        },
                        labelLine: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                formatter: '{d}%',
                                distance: -3
                            }
                        },
                        left: 'left',
                        data: []
                    }]
                },
                activityTrend: {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        // Try 'horizontal', 'vertical'
                        orient: 'horizontal',
                        right: 'center',
                        top: 'top',
                        width: '60%',
                        textStyle: {
                            color: '#ccc'
                        },
                        icon: 'rect'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['2021-10-26', '2021-10-27', '2021-10-28', '2021-10-29', '2021-10-30', '2021-10-31', '2021-11-01', '2021-11-02', '2021-11-03', '2021-11-04', '2021-11-05', '2021-11-06', '2021-11-07', '2021-11-08', '2021-11-09',]
                    },
                    yAxis: {
                        type: 'value'
                    },
                    label: {
                        // show: true,
                        position: 'bottom',
                        textStyle: {
                            fontSize: 20
                        }
                    },
                    series: [
                    ]
                },
                deliveryList: [],
                companyRank: [],
                companyNatureRate: {
                    currentIndex: 1,
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        id: 'companyNatureEchartLegend',
                        // Try 'horizontal', 'vertical'
                        orient: 'vertical',
                        top: 'center',
                        height: '70%',
                        right: '10%',
                        textStyle: {
                            color: '#ccc'
                        },
                        icon: 'rect'
                    },
                    series: [{
                        type: 'pie',
                        radius: ['20%', '60%'],
                        right: '40%',
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: "inside",
                                textStyle: {
                                    color: "#fff",
                                },
                            },
                        },
                        labelLine: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                formatter: '{d}%',
                                distance: -3
                            }
                        },
                        left: 'left',
                        data: []
                    }]
                },
                companySizeRate: {
                    currentIndex: 1,
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        id: 'companySizeEchartLegend',
                        // Try 'horizontal', 'vertical'
                        orient: 'vertical',
                        // right: 10,
                        top: 'center',
                        height: '70%',
                        right: '10%',
                        textStyle: {
                            color: '#ccc'
                        },
                        icon: 'rect'
                    },
                    series: [{
                        type: 'pie',
                        radius: ['20%', '60%'],
                        right: '40%',
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: "inside",
                                textStyle: {
                                    color: "#fff",
                                },
                            },
                        },
                        labelLine: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                formatter: '{d}%',
                                distance: -3
                            }
                        },
                        data: [
                            /*{ value: 70, name: '20-99人' }, { value: 30, name: '100-499人' }, { value: 10, name: '1000-9999人' }*/
                        ]
                    }]
                },
                industryRate: {
                    currentIndex: 1,
                    /*tooltip: {
                        trigger: 'item',
                        formatter: "{b}: <br/>{c} ({d}%)",
                    },*/
                    legend: {
                        id: 'industryEchartLegend',
                        type: 'scroll',
                        // Try 'horizontal', 'vertical'
                        orient: 'vertical',
                        height: '70%',
                        pageIconSize: '',
                        top: 'center',
                        right: '3%',
                        textStyle: {
                            color: '#ccc'
                        },
                        icon: 'rect'
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    series: [{
                        type: 'pie',
                        radius: ['30%', '80%'],
                        right: '20%',
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: "inside",
                                textStyle: {
                                    color: "#fff",
                                },
                            },
                        },
                        labelLine: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '16',
                                formatter: '{b}\n{d}%',
                                distance: -3
                            }
                        },
                        left: 'left',
                        data: []
                    }]
                },
                hotJobRank: [],
                // companyOfDistrict: {
                //     tooltip: {
                //         trigger: 'item'
                //     },
                //     legend: {
                //         data: ['柳州市', '天津市', '北京市', '南宁市', '安顺市']
                //     },
                //     xAxis: {
                //         data: ['柳州市', '天津市', '北京市', '南宁市', '安顺市']
                //     },
                //     yAxis: {},
                //     series: [
                //         {
                //             name: 'number',
                //             type: 'bar',
                //             data: [9, 3, 3, 2, 1]
                //         }
                //     ]
                // }
            }
        },
        methods: {
            getCurrentTime() {
                let date = new Date()
                this.time = `${date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()}:${date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds()}`
            },
            getCurrentDay() {
                let date = new Date()
                if (date.getDay() == 1) {
                    this.day = '星期一'
                    return
                }
                if (date.getDay() == 2) {
                    this.day = '星期二'
                    return
                }
                if (date.getDay() == 3) {
                    this.day = '星期三'
                    return
                }
                if (date.getDay() == 4) {
                    this.day = '星期四'
                    return
                }
                if (date.getDay() == 5) {
                    this.day = '星期五'
                    return
                }
                if (date.getDay() == 6) {
                    this.day = '星期六'
                    return
                }
                if (date.getDay() == 7) {
                    this.day = '星期天'
                    return
                }
            },
            getCurrentDate() {
                let date = new Date()
                this.date = `${date.getFullYear()}-${date.getMonth() >= 10 ? date.getMonth() : '0' + date.getMonth()}-${date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()}`
            },
            updateTimer() {
                setInterval(() => {
                    // 轮播学历分布
                    this.updateSelected(this.eduEchart, this.eduLevel)
                    // 轮播工作经验
                    this.updateSelected(this.expEchart, this.workExp)
                    // 轮播性别占比
                    this.updateSelected(this.sexEchart, this.sexRate)
                    // 轮播年龄分布
                    this.updateSelected(this.ageEchart, this.ageRate)
                    // 轮播最受欢迎的行业
                    this.updateSelected(this.industryRateEchart, this.industryRate)
                    // this.updateLegendScroll(this.industryRateEchart, this.industryRate)
                    // 轮播企业性质占比
                    this.updateSelected(this.companyNatureEchart, this.companyNatureRate)
                    // 轮播企业性质占比
                    this.updateSelected(this.companySizeEchart, this.companySizeRate)
                }, 700)
            },
            updateSelected(echart, option) {
                let index = 0
                if (option.currentIndex == undefined) {
                    option.currentIndex = 1
                }
                index = option.currentIndex
                let data = option.series[0].data
                if (index - 1 === -1) {
                    echart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: data.length - 1 })
                } else {
                    echart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: index - 1 })
                }
                echart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index })
                echart.dispatchAction({
                    type: 'legendScroll',
                    scrollDataIndex: index < (data.length - 4) ? index + 1 : 0,
                    legendId: option.legend.id
                })
                option.currentIndex++
                if (option.currentIndex >= data.length) {
                    option.currentIndex = 0
                }
            },
            updateLegendScroll(echart, option) {
                // 获取当前要滚动的图例id
                let index = 0
                // 如果不存在这个属性，则赋值为1
                if (option.series[0].currentIndex == undefined) {
                    option.series[0].currentIndex = 1
                } else {
                    index = option.series[0].currentIndex
                }
                let data = option.series[0].data
                // 更新图例滚动
                echart.dispatchAction({
                    type: 'legendScroll',
                    scrollDataIndex: index,
                    legendId: option.legend.id
                })
                // option.series[0].currentIndex++
                // option.series[0].currentIndex = option.series[0].currentIndex % data.length
            },
            onViewportSizeChanged() {
                // 当前视口大小改变时
                window.location.reload()
            },
            initData() {
                /* 为ajax提供访问this的途径 */
                let _this = this;
                /* 使用综合接口代替之前的详细接口 */
                $.ajax({
                    url: '/data_screen/ajax',
                    type: 'GET',
                    async: false,
                    success(res) {
                        let data = {}
                        if (res.code != undefined && res.code == 0) {
                            data = res.data
                        }
                        let {
                            age,
                            companies_number,
                            company_rank,
                            delivery,
                            delivery_list,
                            edu,
                            industry,
                            job,
                            job_rank,
                            jobs_number,
                            nature,
                            recruits_number,
                            resume,
                            resumes_number,
                            sex,
                            size,
                            work_exp,
                            time_line,
                            user_register,
                            user_login,
                            create_resume,

                            company_login,
                            company_register,
                            download_resume
                        } = data

                        /* 左边的求职者相关数据 */
                        if (sex != undefined) {
                            _this.sexRate.series[0].data = sex
                        }
                        if (edu != undefined) {
                            _this.eduLevel.series[0].data = edu
                        }
                        if (age != undefined) {
                            _this.ageRate.series[0].data = age
                        }
                        if (work_exp != undefined) {
                            _this.workExp.series[0].data = work_exp
                        }
                        if (industry != undefined) {
                            _this.industryRate.series[0].data = industry
                        }

                        /* 入驻企业 */
                        if (companies_number != undefined) {
                            _this.registeredCompany = companies_number
                        } else {
                            _this.registeredCompany = 0
                        }
                        /* 在招职位 */
                        if (jobs_number != undefined) {
                            _this.recruitingJobs = jobs_number
                        } else {
                            _this.recruitingJobs = 0
                        }
                        /* 用人需求 */
                        if (recruits_number != undefined) {
                            _this.recruitNumber = recruits_number
                        } else {
                            _this.recruitNumber = 0
                        }
                        /* 求职人数 */
                        if (resumes_number != undefined) {
                            _this.seekerNumber = resumes_number
                        } else {
                            _this.seekerNumber = 0
                        }

                        /* 活跃度相关 */
                        if (time_line != undefined) {
                            _this.activityTrend.xAxis.data = time_line

                            /* 个人注册 */
                            if (user_register) {
                                let userRegisterData = {
                                    name: '个人注册',
                                    type: 'line',
                                    lineStyle: { width: 2 },
                                    data: []
                                }
                                for (let i = 0; i < time_line.length; i++) {
                                    let crrMatched = false
                                    for (let j = 0; j < user_register.length; j++) {
                                        // 尝试匹配当天的数据
                                        if (user_register[j].date == time_line[i]) {
                                            userRegisterData.data.push(user_register[j].number)
                                            crrMatched = true
                                            break
                                        }
                                    }
                                    // 如果循环了一遍没有匹配到当天的数据，则说明当天是0
                                    if (!crrMatched) {
                                        userRegisterData.data.push(0)
                                    }
                                }
                                _this.activityTrend.series.push(userRegisterData)
                            }

                            /* 个人登录 */
                            if (user_login) {
                                let userLoginData = {
                                    name: '个人登录',
                                    type: 'line',
                                    label: {
                                        show: false,
                                    },
                                    lineStyle: { width: 2 },
                                    data: []
                                }
                                for (let i = 0; i < time_line.length; i++) {
                                    let crrMatched = false
                                    for (let j = 0; j < user_login.length; j++) {
                                        // 尝试匹配当天的数据
                                        if (user_login[j].date == time_line[i]) {
                                            userLoginData.data.push(user_login[j].number)
                                            crrMatched = true
                                            break
                                        }
                                    }
                                    // 如果循环了一遍没有匹配到当天的数据，则说明当天是0
                                    if (!crrMatched) {
                                        userLoginData.data.push(0)
                                    }
                                }
                                _this.activityTrend.series.push(userLoginData)
                            }

                            /* 新增简历 */
                            if (create_resume) {
                                let createResumeData = {
                                    name: '新增简历',
                                    type: 'line',
                                    lineStyle: { width: 2 },
                                    data: []
                                }
                                for (let i = 0; i < time_line.length; i++) {
                                    let crrMatched = false
                                    for (let j = 0; j < create_resume.length; j++) {
                                        // 尝试匹配当天的数据
                                        if (create_resume[j].date == time_line[i]) {
                                            createResumeData.data.push(create_resume[j].number)
                                            crrMatched = true
                                            break
                                        }
                                    }
                                    // 如果循环了一遍没有匹配到当天的数据，则说明当天是0
                                    if (!crrMatched) {
                                        createResumeData.data.push(0)
                                    }
                                }
                                _this.activityTrend.series.push(createResumeData)
                            }

                            /* 投递简历 */
                            if (delivery) {
                                let deliveryData = {
                                    name: '投递简历',
                                    type: 'line',
                                    lineStyle: { width: 2 },
                                    data: []
                                }
                                for (let i = 0; i < time_line.length; i++) {
                                    let crrMatched = false
                                    for (let j = 0; j < delivery.length; j++) {
                                        // 尝试匹配当天的数据
                                        if (delivery[j].date == time_line[i]) {
                                            deliveryData.data.push(delivery[j].number)
                                            crrMatched = true
                                            break
                                        }
                                    }
                                    // 如果循环了一遍没有匹配到当天的数据，则说明当天是0
                                    if (!crrMatched) {
                                        deliveryData.data.push(0)
                                    }
                                }
                                _this.activityTrend.series.push(deliveryData)
                            }

                            /* 企业注册 */
                            if (company_register) {
                                let companyRegisterData = {
                                    name: '企业注册',
                                    type: 'line',
                                    lineStyle: { width: 2 },
                                    data: []
                                }
                                for (let i = 0; i < time_line.length; i++) {
                                    let crrMatched = false
                                    for (let j = 0; j < company_register.length; j++) {
                                        // 尝试匹配当天的数据
                                        if (company_register[j].date == time_line[i]) {
                                            companyRegisterData.data.push(company_register[j].number)
                                            crrMatched = true
                                            break
                                        }
                                    }
                                    // 如果循环了一遍没有匹配到当天的数据，则说明当天是0
                                    if (!crrMatched) {
                                        companyRegisterData.data.push(0)
                                    }
                                }
                                _this.activityTrend.series.push(companyRegisterData)
                            }
                            /* 企业登录 */
                            if (company_login) {
                                /* 企业用户 */
                                let companyLoginData = {
                                    name: '企业登录',
                                    type: 'line',
                                    lineStyle: { width: 2 },
                                    data: []
                                }
                                for (let i = 0; i < time_line.length; i++) {
                                    let crrMatched = false
                                    for (let j = 0; j < company_login.length; j++) {
                                        // 尝试匹配当天的数据
                                        if (company_login[j].date == time_line[i]) {
                                            companyLoginData.data.push(company_login[j].number)
                                            crrMatched = true
                                            break
                                        }
                                    }
                                    // 如果循环了一遍没有匹配到当天的数据，则说明当天是0
                                    if (!crrMatched) {
                                        companyLoginData.data.push(0)
                                    }
                                }
                                _this.activityTrend.series.push(companyLoginData)
                            }
                            /* 发布职位 */
                            if (job) {
                                let jobData = {
                                    name: '发布职位',
                                    type: 'line',
                                    lineStyle: { width: 2 },
                                    data: []
                                }
                                for (let i = 0; i < time_line.length; i++) {
                                    let crrMatched = false
                                    for (let j = 0; j < job.length; j++) {
                                        // 尝试匹配当天的数据
                                        if (job[j].date == time_line[i]) {
                                            jobData.data.push(job[j].number)
                                            crrMatched = true
                                            break
                                        }
                                    }
                                    // 如果循环了一遍没有匹配到当天的数据，则说明当天是0
                                    if (!crrMatched) {
                                        jobData.data.push(0)
                                    }
                                }
                                _this.activityTrend.series.push(jobData)
                            }
                            /* 下载简历 */
                            if (download_resume) {
                                let downloadResumeData = {
                                    name: '下载简历',
                                    type: 'line',
                                    lineStyle: { width: 2 },
                                    data: []
                                }
                                for (let i = 0; i < time_line.length; i++) {
                                    let crrMatched = false
                                    for (let j = 0; j < download_resume.length; j++) {
                                        // 尝试匹配当天的数据
                                        if (download_resume[j].date == time_line[i]) {
                                            downloadResumeData.data.push(download_resume[j].number)
                                            crrMatched = true
                                            break
                                        }
                                    }
                                    // 如果循环了一遍没有匹配到当天的数据，则说明当天是0
                                    if (!crrMatched) {
                                        downloadResumeData.data.push(0)
                                    }
                                }
                                _this.activityTrend.series.push(downloadResumeData)
                            }
                        }

                        /* 获取企业数据 */
                        if (nature != undefined) {
                            _this.companyNatureRate.series[0].data = nature
                        }
                        if (size != undefined) {
                            _this.companySizeRate.series[0].data = size
                        }

                        /* 获取排行榜 */
                        if (job_rank != undefined) {
                            _this.hotJobRank = job_rank
                        }
                        if (company_rank != undefined) {
                            _this.companyRank = company_rank
                        }
                        /* 获取投递动态 */
                        if (delivery_list != undefined) {
                            _this.deliveryList = delivery_list
                        }
                    }
                })
            }
        },
        filters: {
            dateFormat(timestamp) {
                let date = new Date(timestamp * 1000)
                return `${date.getMonth() >= 10 ? date.getMonth() : '0' + date.getMonth()}-${date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()}}`
            },
            timeFormat(timestamp) {
                let date = new Date(timestamp * 1000)
                return `${date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()}:${date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds()}`
            }
        },
        computed: {
            titleSymbol() {
                let string = ''
                for (let i = 0; i < this.title.length; i++) {
                    string += '\u00a0\u00a0'
                }
                return string + ''
            }
        },
        mounted() {
            this.timer = setInterval(() => {
                this.getCurrentDate()
                this.getCurrentDay()
                this.getCurrentTime()
            }, 1000)
            this.initData()
            // 下一个UI帧进行实例化，用以处理vue动态数据对swiper的影响
            this.$nextTick(() => {
                /* 实时投递的swiper */
                this.deliveryListSwiper = new Swiper('.delivery-container', {
                    direction: 'vertical',
                    loop: true,
                    autoplay: {
                        delay: 500
                    },
                    autoHeight: true,
                    slidesPerView: 7,
                    speed: 500,
                    observer: true,
                    observerParents: true
                })
                /* 最受欢迎职位的swiper */
                this.hotJobRankSwiper = new Swiper('.hot-job-rank-container', {
                    direction: 'vertical',
                    loop: true,
                    autoplay: {
                        delay: 500
                    },
                    autoHeight: true,
                    slidesPerView: 7,
                    observer: true,
                    observerParents: true
                })
                /* 最受欢迎企业的swiper */
                this.companyRankContainer = new Swiper('.company-rank-container', {
                    direction: 'vertical',
                    loop: true,
                    autoplay: {
                        delay: 500
                    },
                    autoHeight: true,
                    slidesPerView: 7,
                    speed: 500,
                    /*
                     启动动态检查器(OB/观众/观看者)，
                     当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，
                     自动初始化swiper
                    */
                    observer: true,
                    observerParents: true
                })
            })
            /* 学历分布 */
            this.eduEchart = echarts.init(this.$refs['edu-level'])
            this.eduEchart.currentIndex = 1
            this.eduEchart.setOption(this.eduLevel)
            /* 工作经验 */
            this.expEchart = echarts.init(this.$refs['work-exp'])
            this.expEchart.currentIndex = 1
            this.expEchart.setOption(this.workExp)
            /* 男女比例 */
            this.sexEchart = echarts.init(this.$refs['sex-rate'])
            this.sexEchart.currentIndex = 1
            this.sexEchart.setOption(this.sexRate)
            /* 年龄分布 */
            this.ageEchart = echarts.init(this.$refs['age-rate'])
            this.ageEchart.currentIndex = 1
            this.ageEchart.setOption(this.ageRate)
            /* 行业情况 */
            this.industryRateEchart = echarts.init(this.$refs['industry-rate'])
            this.industryRateEchart.currentIndex = 1
            this.industryRateEchart.setOption(this.industryRate)
            /* 活跃度趋势 */
            this.trendEchart = echarts.init(this.$refs['activity-trend'])
            this.trendEchart.setOption(this.activityTrend)
            /* 企业性质比例 */
            this.companyNatureEchart = echarts.init(this.$refs['company-nature'])
            this.companyNatureEchart.currentIndex = 1
            this.companyNatureEchart.setOption(this.companyNatureRate)
            /* 企业规模情况 */
            this.companySizeEchart = echarts.init(this.$refs['company-size'])
            this.companySizeEchart.currentIndex = 1
            this.companySizeEchart.setOption(this.companySizeRate)
            /* 地区企业数量 */
            // this.companyOfDistrictEchart = echarts.init(this.$refs['company-of-district'])
            // this.companyOfDistrictEchart.setOption(this.companyOfDistrict)

            // 开启定时器
            this.updateTimer();
            window.onresize = this.onViewportSizeChanged
        }
    })
</script>
<script>
    setTimeout(() => {
        window.location.reload()
    }, 300000)
</script>

</html>